<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>
	<body>
		<div class="mui-content" id="divMySelf">
	       <div class="mui-card" v-for="item in news">
				<div class="mui-card-header">
					<label v-html="item.title">标题</label>
				</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner mui-navigate-right" @tap="newdetail(item)" >
						<p v-html="item.content"></p>
						<div style="background:no-repeat;" v-for="url in item.imageUrls">
							<img v-bind:src="url" style="width:100%;display:inline-block;height:auto;" />
						</div>
						<h5>时间：<label v-html="item.publishDateStr"></label> 作者：<label v-html="item.posterScreenName"></label></h5>
					</div>
				</div>
				<div class="mui-card-footer">
					<a id="btnShare"><span class="mui-icon-extra mui-icon-extra-share"></span>分享</a>
					<a id="btnDelete" @tap="deleteNew(item)"><span class="mui-icon mui-icon-closeempty"></span>删除</a>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/shiquan.app.js"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el: '#divMySelf',
				data: {
					news: [] //列表信息流数据
				}
			});
			mui.init();
			
			mui.plusReady(function(){
				var ws=plus.webview.currentWebview();
				ws.setPullToRefresh({support:true,
					height:"50px",
					range:"200px",
					contentdown:{
						caption:"下拉可以刷新"
					},
					contentover:{
						caption:"释放立即刷新"
					},
					contentrefresh:{
						caption:"正在刷新..."
					}
				},loadData);
				
				loadData();
			});
			// 刷新页面
			function loadData(){
				setTimeout(function(){
					plus.nativeUI.showWaiting("加载数据，请稍候...");
					app.readNews(function(result){
						plus.nativeUI.closeWaiting()
						console.log("result="+JSON.stringify(result));
						var ws=plus.webview.currentWebview();
						ws.endPullToRefresh();
						if(result.state != 1){
							plus.nativeUI.alert(result.message);
							return;
						}
						console.log(JSON.stringify(result.data));
						vue.news = result.data;
					});
				},1000);
			}
			/*删除*/
			function deleteNew(item){
				plus.nativeUI.confirm("确认删除所选择的信息？",function(e){
					console.log(e.index);
					if(e.index != 0){
						return;
					}
					plus.nativeUI.showWaiting("加载数据，请稍候...");
					app.readNews(function(result){
						plus.nativeUI.closeWaiting()
						console.log("result="+JSON.stringify(result));
						var ws=plus.webview.currentWebview();
						ws.endPullToRefresh();
						if(result.state != 1){
							plus.nativeUI.alert(result.message);
							return;
						}
						console.log(JSON.stringify(result.data));
						var news = result.data;
						for(var i=news.length-1;i>=0;i--){
							if(news[i].id == item.id)
								news.splice(i,1);
						}
						app.saveNews(news,function(result){
							if(result.state != 1){
								plus.nativeUI.alert("删除数据失败！");
								return;
							}
							vue.news = news;
							plus.nativeUI.toast("删除数据成功！");
						});
					});
				},["取消","确定"])
			}
			/**
			 * 打开新闻详情
			 * @param {Object} item 当前点击的新闻对象
			 */
			function newdetail(item) {
				
				mui.openWindow({ 
					url: 'newdetail.html',
					id: 'newdetail',
					extras: {
						title:item.title,
						url: item.url
					}
				});
			}
		</script>
	</body>

</html>